<template>
    <div>
        <am-popup
            :show.sync="currentShow"
            position="bottom"
            :height="popupHeight">
            <am-nav-bar
                class="am-picker-header"
                mode="light"
                :title="title"
                :left-btn="[{is: 'text', text: dismissText, key: 'dismiss'}]"
                :right-btn="[{is: 'text', text: okText, key: 'ok'}]"
                @click="handleHeaderClick"
            ></am-nav-bar>
            <scroller>
                <am-list-checkbox
                    v-for="item in list"
                    :key="item.value"
                    :title="item.name"
                    :value="item.value"
                    :checked-values.sync="value"
                ></am-list-checkbox>
            </scroller>
            <div :style="barBottomItemStyle"></div>
        </am-popup>

        <am-list>
           <am-list-item
               slot-scope="{ extra, show }"
               :title="label"
               :extra="placeholder"
               @click="currentShow = true"></am-list-item>
        </am-list>
    </div>
</template>

<script>
    import AmPopup from "../../weex-amui/packages/am-popup/index";
    import AmButton from "../../weex-amui/packages/am-button/index";
    import AmListCheckbox from "../../weex-amui/packages/am-list-checkbox/index";
    import AmWhiteSpace from "../../weex-amui/packages/am-white-space/index";
    import AmWingBlank from "../../weex-amui/packages/am-wing-blank/index";


    import Utils from '../../weex-amui/packages/utils'
    import AmList from "../../weex-amui/packages/am-list/index";
    import AmNavBar from "../../weex-amui/packages/am-nav-bar/index";
    import AmListItem from "../../weex-amui/packages/am-list/item";

    const config = weex.config.eros


    export default {
        name: "yx-select",
        components: {AmListItem, AmNavBar, AmList, AmWingBlank, AmWhiteSpace, AmListCheckbox, AmButton, AmPopup},
        model: {
            prop: 'value',
            event: 'ok'
        },
        props: {
            value: {
                type: Array,
                default: null
            },
            list: {
                type: Array,
                default: null
            },
            label: {
                type: String,
                default: ''
            }

        },
        computed: {
            popupHeight () {
                return 562 + (this.isIPhoneX ? 78 : 0)
            }
        },
        data (){
            return {
                currentShow: false,
                // currentValue: [],
                isIPhoneX: Utils.isIPhoneX(),
                barBottomItemStyle: {
                    height:config.touchBarHeight,
                    width:750,
                    backgroundColor:'white'
                },
                title: '请选择',
                dismissText: '取消',
                okText: '确定',
                placeholder: '请选择',
                isTargetEvent: false

            }
        },
        methods: {
            handleHeaderClick (type) {
                switch (type) {
                    case 'ok':
                        this.isTargetEvent = true
                        this.$emit('ok',this.value)
                        this.close('ok')
                        break
                    case 'dismiss':
                        this.close('dismiss')
                        break
                }
            },
            close (type = 'dismiss') {
                this.$emit('hide', type)
                this.currentShow = false
            },

            formatPlaceHolder (currentValue){
                let arr = []
                for (let i in this.list){
                    let ele = this.list[i]
                    for (let j in currentValue){
                        let cele = currentValue[j]
                        if (ele.value === cele) {
                            arr.push(ele.name)
                            break
                        }
                    }
                }

                if (arr.length == 0) {
                    return '请选择'
                }else {
                    return arr.join(',').length < 13 ? arr.join(','):arr.join(',').substring(0,12) +'...';
                }

            }
        },

        created (){
        },

        mounted (){
            this.placeholder = this.formatPlaceHolder(this.value)
        },


        watch: {
            value (val){
                this.placeholder = this.formatPlaceHolder(this.value)
                this.isTargetEvent = false
            }
        }

    }
</script>

<style lang="scss" scoped>
 @import "yx-select";
</style>
